<template>
	<view style="padding: 2vw;">
		
		<uni-segmented-control :current="order" :values="order" @clickItem="changeOrder"></uni-segmented-control>
		
		<scroll-view scroll-y="true">
			<view class="" v-for="d in list">
				<!-- 无图 -->
				<view class="news-border" v-if="d.imgs.length==0">
					<text @click="showDetail(d.id)">{{d.title}}</text>
					<view class="news-footer">
						<text>{{d.source}}</text>
						<text>{{d.likes}}点赞</text>
						<text>{{d.comments}}评论</text>
						<text>{{d.createdAt}}</text>
					</view>
				</view>
				<!-- 单图 -->
				<view class="news-border" v-else-if="d.imgs.length<3">
					<view class="news-img">
						<view class="info">
							<text @click="showDetail(d.id)">{{d.title}}</text>
							<view class="news-footer">
								<text>{{d.source}}</text>
								<text>{{d.likes}}点赞</text>
								<text>{{d.comments}}评论</text>
								<text>{{d.createdAt}}</text>
							</view>
						</view>
						<view>
							<view class="bg-img" :style="`background-image: url(${d.imgs[0]});`" />
						</view>
					</view>
				</view>
				<!-- 三图 -->
				<view class="news-border" v-else>
					<view class="">
						<text @click="showDetail(d.id)">{{d.title}}</text>
						<view class="news-footer">
							<text>{{d.source}}</text>
							<text>{{d.likes}}点赞</text>
							<text>{{d.comments}}评论</text>
							<text>{{d.createdAt}}</text>
						</view>
					</view>
					<view class="imgs">
						<view class="bg-img" :style="`background-image: url(${d.imgs[0]});`"></view>
						<view class="bg-img" :style="`background-image: url(${d.imgs[1]});`"></view>
						<view class="bg-img" :style="`background-image: url(${d.imgs[2]});`"></view>
					</view>
				</view>
			</view>
			<uni-load-more :status="more" :content-text="moreText" @clickLoadMore="loadMore"></uni-load-more>
		</scroll-view>
		<image @click="requery" class="refresh" src="/static/refresh.png" mode="widthFix" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '@/js/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		query()
	})
	
	const showDetail = (id) => {
		uni.navigateTo({
			url: `/pages/news/detail?id=${id}`,
		})
	}

	const page = ref({
		"pageSize": 10,
		"pageNumber": 1
	})
	
	const requery = () => {
		page.value.pageNumber = 1
		list.value = []
		query()
	}

	const order = ref(0)
	const orders = ref(['最新','高赞','最热','热评'])
	
	const changeOrder = (event) => {
		page.value.pageNumber = 1
		order.value = event.currentIndex
		list.value = []
		query()
	}

	const queryInfo = ref({
		title: ''
	})

	const list = ref([])
	
	const more = ref('more')
	const moreText = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载中...",
		contentnomore: "我是有底线的"
	})
	
	const loadMore = () => {
		page.value.pageNumber++;
		if (page.value.pageNumber > page.value.pageCount) {
			more.value = 'noMore'
			return
		}
		query()
	}

	const query = () => {
		api.get(`/autodata/query/news/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, queryInfo.value,
			(data) => {
				if (data.success) {
					page.value = data.data.pageBean
					data.data.list.forEach((item) => {
						item.imgs = item.imgs.split(',')
						item.createAt = tools.formatDate(item.createAt, 'MM-dd')
				})
				list.value = list.value.concat(data.data.list)
				return
			}
			uni.showModal({
				title: '错误',
				content: data.message
			})
		})
	}
</script>

<style scoped>
	.imgs {
		display: flex;
		justify-content: space-around;
	}

	.news-img {
		display: flex;
	}

	.news-img> .info {
		flex: 1;
	}
	
	.bg-img {
	  width: 30vw;
	  height: 18vw;
	  background-size: cover;
	  background-repeat: no-repeat;
	  /* background-image: url(''); */
	}

	.news-border {
		padding: 0.5rem 0px;
		border-bottom: 1px solid #dcdcdc;
	}

	.news-footer {
		font-size: 0.8em;
		color: #666;
		padding: 0.5rem 0px;
	}

	.news-footer:deep(uni-text) {
		margin-right: 0.2rem;
	}
	
	.refresh {
	  width: 2rem;
	  position: fixed;
	  right: 1rem;
	  bottom: calc(var(--window-bottom) + 1rem);
	  background-color: rgba(255, 255, 255, 0.6);
	  border-radius: 50%;
	}
</style>